import React from 'react';
import styles from './PlayLive.css';
import {getcookie} from '../../utils/cookies'

import { Input,Icon,Spin,Affix } from 'antd';
const Search = Input.Search;
import logoImg from '../../assets/logo.png'
import catIcon from '../../assets/catIcon.jpg'
import searchIcon from '../../assets/searchIcon.png'
import arrowRight from '../../assets/arrowRight.png'
import pageRight from '../../assets/pageRight.png'
const  imgVideoPicUrl = "https://image.huanqiushuju.com/"
import {HOMEPAGE_URL} from '../../utils/constants'
import 'antd/dist/antd.css'
import Reflv from '../User/Reflv/index'
class PlayLive extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      liveVideoUrl:"",
      liveVideoType:"flv",
      arrowArr:[{arrowText:'首页',arrowIcon:searchIcon,id:1},
        {arrowText:'课程详情',arrowIcon:searchIcon,id:2},
        {arrowText:'直播',arrowIcon:searchIcon,id:3},
      ],
    }
  }
  componentWillMount(){
    let liveVideoUrl = getcookie("liveVideoUrl")

    this.setState({liveVideoUrl:liveVideoUrl, liveVideoType:"flv"})
    let unionid = getcookie("unionid")


    if (unionid != null && unionid != '' && unionid != undefined) {

    } else {
      window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

    }

  }


  render(){
    return (
      <div className={styles.allContent}>
        <div className={styles.contentFlex}>
          <Affix>
          <div className={styles.topHeader}>

            <div className={styles.headerLeft}>
              <img className={styles.logoImg} src={logoImg} alt="logo"/>
              <h3 className={styles.courseHead}>环球云逸课堂</h3>
              <Input
                placeholder="输入搜索内容"
                className={styles.searchInput}
                style={{ width: 200 }}
                onChange={(e)=>{
                  this.setState({searchText:e.target.value})
                }}
                value={this.state.searchText}
                onPressEnter={this.onSearchInput}

              />
              <div className={styles.searchIconBac} onClick={this.onSearchInput}>
                <img className={styles.searchIcon} src={searchIcon} alt="搜索"/>
              </div>
            </div>

            <div className={styles.headerRight}>
              <div>我的课程</div>
              <div>通知</div>
              <img className={styles.avateIcon} src={logoImg} alt="logo"/>
            </div>

          </div>
          </Affix>
          <Affix offsetTop={46}>
          <div className={styles.arrowText}>
            {
              this.state.arrowArr.map((item)=>{
                return (
                  <div key={item.arrowText} className={styles.arrowContent} onClick={()=>{
                   this.props.dispatch({type:"playLive/goBack",payload:{item}})
                  }}>
                    <div className={item.id==3?styles.arrowRightTextBlue:styles.arrowRightText}>{item.arrowText}
                     <img className={item.id==3?styles.arrowRightNone:styles.arrowRight} src={arrowRight} alt=""/></div>

                  </div>
                )
              })
            }

          </div>
          </Affix>




       <div className={styles.reflvStyle}>
        <Reflv

          url={this.state.liveVideoUrl}
          type={this.state.liveVideoType}
          isLive
          cors
          controls
          config={{
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 128,
          }}
        />
       </div>
        </div>
      </div>

    )
  }



}
export default PlayLive;
